<template>
  <div class="product-comment">
    <div class="p-header">
      <div class="title1"> 用户评价 <span>(2)</span></div>
      <div style="display: flex; flex-direction: row;">
        <div class="button"> 有图(1)</div>
        <div class="button"> 好评(2)</div>
        <div class="button"> 中评(0)</div>
        <div class="button"> 差评(0)</div>
      </div>
    </div>
    <div class="product-comment-content" style="padding-top: 10px;">
      <div class="el-loading-mask" style="display: none;">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg><!----></div>
      </div>
      <div class="product-comment-item">
        <div class="product-comment-top flex-start">
          <div class="userInfo"><img src="@/assets/images/product-comment-avatar1.png" alt="User">
            <div>hx******</div>
          </div>
        </div>
        <div class="rate">
          <div class="rate-box">
            <div role="slider" aria-valuenow="5" aria-valuetext="" aria-valuemin="0" aria-valuemax="5" tabindex="0"
                 class="el-rate"><span class="el-rate__item" style="cursor: auto;"><i
                class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span>
              <!----></div>
            <span style="color: var(--color-main); font-size: 12px;">订单已完成</span></div>
        </div>
        <p class="product-comment-text"> I love this item. Its super soft and fits just right. Adorable lion. </p>
        <div></div>
        <span class="eval-time"><span>韩国&nbsp;&gt;&gt;&nbsp; </span>2023-12-02 03:40</span></div>
      <div class="product-comment-item">
        <div class="product-comment-top flex-start">
          <div class="userInfo"><img src="@/assets/images/product-comment-avatar2.png" alt="User">
            <div>va******</div>
          </div>
        </div>
        <div class="rate">
          <div class="rate-box">
            <div role="slider" aria-valuenow="4" aria-valuetext="" aria-valuemin="0" aria-valuemax="5" tabindex="0"
                 class="el-rate"><span class="el-rate__item" style="cursor: auto;"><i
                class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(247, 186, 42);"><!----></i></span><span
                class="el-rate__item" style="cursor: auto;"><i class="el-rate__icon el-icon-star-on"
                                                               style="color: rgb(239, 242, 247);"><!----></i></span>
              <!----></div>
            <span style="color: var(--color-main); font-size: 12px;">订单已完成</span></div>
        </div>
        <p class="product-comment-text"> Esta muy bueno, es grande el talle, bastante grandote. Lo malo es que en las
          fotos se muestra con cierre y te lo entregan con botones. Sin duda eso es abarata el disfraz, por lo tanto el
          precio es bastante caro para el producto.En cuanto a comodidad es super caluroso y suavecito.Ideal para
          lugares bien fríos.La capucha de leon es todo, esta muy bien lograda. A mi hijo le encanta, aunque esta muy a
          disgusto con los botones, porque encima se salen enseguida.Al vendedor, ideal, poner foto con botones y no con
          cierre.El resto ok. Esta muy bueno. seria excelente si viene con cierre. </p>
        <div>
          <div class="el-image evaluation-img"><img
              src="https://argos-shop-online.s3.amazonaws.com/pc/pingjia/12/B07V3DF1QP/71Nvyocy9-L._SL_.jpg"
              class="el-image__inner el-image__preview"><!----></div>
        </div>
        <span class="eval-time"><span>美国&nbsp;&gt;&gt;&nbsp; </span>2023-12-01 09:25</span></div>
    </div>
    <div><!----></div><!----></div>
</template>
<script setup>
</script>
<style scoped>
.product-comment {
  border: 1px solid var(--color-border);
  width: 957px
}

.product-comment .product-comment-text {
  display: -webkit-box
}

.product-comment .button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  border-radius: 14px;
  color: #999;
  margin-right: 13px;
  cursor: pointer;
  background: #eee
}

.product-comment .button.active {
  color: #fff;
  background: var(--color-main)
}

.product-comment .evaluation-img {
  width: 87px;
  height: 87px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-right: 10px
}

.product-comment .p-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  height: 70px;
  padding-left: 37px;
  padding-right: 16px
}

.product-comment .title1 {
  font-weight: 600;
  font-size: 20px;
  color: var(--color-title);
  margin-left: 22px
}

.product-comment-item {
  padding: 15px 40px;
  border-bottom: 1px solid #eee
}

.product-comment-top {
  font-size: 12px;
  justify-content: space-between
}

.product-comment-top .userInfo {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: var(--color-black);
  margin-bottom: 4px
}

.product-comment-top .userInfo img {
  width: 31px;
  height: 31px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 8px
}

.product-comment-top .userInfo span {
  color: var(--color-subtitle)
}

.product-comment .rate .rate-box {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #000
}

.product-comment .eval-time {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  display: inline-block
}

.product-comment-text {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 0;
  color: var(--color-black);
  display: inherit!important;
  word-wrap: break-word
}

.product-comment-pagination {
  width: 100%;
  text-align: center;
  padding: 40px 0
}

.product-comment .attrbox {
  display: flex;
  font-size: 12px;
  color: #333
}

.product-comment .attrbox .attr:nth-child(2) {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid #999
}
</style>